<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/taglib_include.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, target-densitydpi=medium-dpi, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<link href="${ctx}/css/layout.css?ver=${layout_css_version}" rel="stylesheet" type="text/css" />
<style type="text/css">
.b-font {
    width: 90%;
    margin:10pt auto 0px;
}
#s-information {
    height:auto!important;
    height: 120pt;
    min-height:120pt;
}
@media screen and (max-width: 640px){
  footer {
    height:45pt;
  }
}
</style>
<title>${projectTitle }</title>
</head>
<body>
  <header id="main-top">
        <a href="#" style="visibility: hidden;">
          <div id="main-top-left">
            <img src="${ctx}/images/mui_title_back_btn.png" class="img-2" id="back">
          </div>
        </a>
    <div id="main-top-title">订单支付</div>
    <a id="main-top-right" href="javascript:void(0);">
      <img src="${ctx }/images/home_icon.png">
    </a>
  </header>
  <div id="container">
    <div class="f-information">
      <span>班次类型：${cf:schTypeName(orderPaymentInfo.schType) }</span>
      <span> 班次: ${orderPaymentInfo.regBusNo} </span>
      <span> 车型: ${orderPaymentInfo.busTypeName}</span>
    </div>
    <div id="s-information">
      <div id="start-information">
        <span class="b-font">${orderPaymentInfo.startStationName}</span>
      </div>
      <div id="d-information">
        <span id="time-information">${orderPaymentInfo.leaveTime}</span>
        <span id="calendar-information">${orderPaymentInfo.leaveDate}</span>
      </div>
      <div id="arrive-information">
        <span class="b-font">${orderPaymentInfo.arriveStationName}</span>
      </div>
    </div>
    <div class="f-information">
      <span>乘车人</span>
    </div>
       <c:forEach items="${ticketList}" var="ticket" varStatus="status">
         <a href="javascript:void(0);">
          <div id="w-bg">
            <input type="hidden" name="passengId" value="${ticket.passengerId}" id="passenger${status.index}">
            <span>
              <img src="${ctx}/images/icon-4.png" width="33" height="36">
            </span>
            <div class="name">
                 ${ticket.fullname}
              <span class="gender">
                 ${cf:genderTitle(ticket.gender) }
              </span>
            </div>
            <div class="Passengers-type" <c:if test="${ticket.carryFreeTicketFlag==constant.carry}">style="width: 30%;"</c:if>>
                ${cf:passengerTypeName(ticket.passengerType)} 
                <c:if test="${ticket.carryFreeTicketFlag==constant.carry}">
                   (免票携童1)
                </c:if>
            </div>
            <div class="Document-type">
                  ${cf:identificationTypeName(ticket.identificationType)} 
                  ${cf:hiddenIdentificationNumber(ticket.identificationNumber,ticket.identificationType)}
            </div>
            <div class="Passengers-type-title">乘客类型</div>
            <div class="more-1" style="visibility: hidden;">
              <img src="${ctx}/images/more-icon.png" width="14" height="25">
            </div>
          </div>
        </a>
    </c:forEach>
    <div id="total-price">
      <span>
        <img src="${ctx}/images/price-icon.png" width="32" height="32">
      </span>
      <span id="total-p">
        总价
        <span class="s-font-14-2">￥</span>
        <span>${orderPaymentInfo.totalprices}</span>
      </span>
    </div>
  </div>
   <div id="big-button">
     <a href="javascript:void(0)"><div id="payment" class="sumbit-1">立即支付</div></a>
   </div>
  <footer>
    <div>
      <img id="wxpayicon" src="${ctx}/images/wxpay.png">
    </div>
  </footer>
  <%@ include file="/WEB-INF/views/popup_alert.jsp"%>
  <script type="text/javascript" src="${ctx}/js/jquery.min.js?ver=${jquery_min_version}"></script>
  <!-- mergeTo:${ctx}/js/custom.min.js?ver=${custom_min_version} -->
  <script type="text/javascript" src="${ctx}/js/custom.js?ver=${custom_version}"></script>
  <!-- mergeTo -->
  <script type="text/javascript">
      var payResultURL = '${ctx}/pay/result.do?orderpnr=${orderPaymentInfo.orderpnr}&startStationId=${orderPaymentInfo.startStationId}'; //支付结果页面地址
      var gotoURL = '';
      var wcpayIsCalled = false; // 是否已调用微信支付
      var appVer = "${appVer}";
      var const_appver_nc = "${constant.appver_nc}";
      var const_appver_ylns = "${constant.appver_ylns}";

      //调用微信JS api 支付
      function jsApiCall()
      {
          WeixinJSBridge.invoke(
              'getBrandWCPayRequest',
              ${jsApiParam},
              function(res){
            	wcpayIsCalled = false;
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    window.location.href = gotoURL; // 到支付结果页面
                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                    openAlert("已取消支付");
                } else {
                	openAlert("支付失败",function(){
                		  WeixinJSBridge.call('closeWindow');
                	});
                
                }
              }
          );
      }

      function callpay()
      {
          if (typeof WeixinJSBridge == "undefined"){
              if ( document.addEventListener ){
                  document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
              } else if (document.attachEvent){
                  document.attachEvent('WeixinJSBridgeReady', jsApiCall); 
                  document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
              }
          } else {
              jsApiCall();
          }
      }

     $(function(){
    	 //立即支付绑定点击事件
    	 $("#payment").bind("click",function(e){
    			 gotoURL = payResultURL + '&ptiks=${ptiks}';  			 
    			 // 防止重复调用微信支付
    			 if (wcpayIsCalled == false) {
    				 wcpayIsCalled = true;
    				 callpay(); // 调微信支付
    			 }
    	 });

         $("#main-top-right").bind("click", function(){
             var link = "${ctx}/trafficline/index.do?ver=${appVer}" + "&startCityId=" + localStorage.startCityId + "&starting=" + localStorage.starting + "&startStationId=" + localStorage.startStationId + "&startStationsDisabled=" + localStorage.startStationsDisabled + "&groupId=" + localStorage.groupId;
             if (appVer == const_appver_nc || appVer == const_appver_ylns) {
                 link = "${ctx}/indexnc/index.do?ver=${appVer}"
             }
             window.location.href = link;
         });
     });
  </script>
</body>
</html>